<template>
  <div>
    <el-carousel :autoplay="flag" arrow="never">
      <el-carousel-item
        style="height: 300px; margin: 0 10px"
        v-for="(item, index) in carouselDatas"
        :key="index"
      >
        <div class="mina-1">
          <div
            class="texs-1"
            v-for="(items, indexs) in item"
            :key="indexs"
            @click="add(items.name)"
          >
            <img :src="items.icon" v-if="items.icon" class="img-1" />
            <img src="@/assets/head/t-1.png" class="img-1" v-else />
            <div class="texk-1">{{ items.name }}</div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const add = (name: string) => {
  console.log(name)

  if (name === '添加收藏')
    router.push({ path: '/application', query: { type: 1 } })
}

const carouselDatas = inject<Ref<any>>('carouselDatas')

const flag = ref(false)
</script>

<style lang="scss" scoped>
:deep() .el-carousel__indicators {
  text-align: center;
  bottom: 20px;

  .el-carousel__button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #999;
  }
}
.texs-1 {
  margin: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.img-1 {
  width: 55px;
  height: 55px;
}
.mina-1 {
  display: flex;
  flex-wrap: wrap;
}
.texk-1 {
  width: 60px;
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  text-overflow: ellipsis; /* 在文本超出容器时显示省略号 */
}
</style>
